<template>
    <div class="page">
        <a-form class="form">
            <lo-select class="form-item" v-model:value="tableQuery.enableStatus" @change="pageChange(1)" :options="[
                { label: '全部', value: '' },
                { label: '停用', value: '00' },
                { label: '启用', value: '01' },
            ]" placeholder="启用/停用"></lo-select>
            <a-input class="form-item" v-model:value="tableQuery.keyWord" placeholder="关键词搜索"></a-input>
            <a-button class="form-btn" @click="pageChange(1)" type="primary">查询</a-button>
        </a-form>
        <div class="page_content flex-column">
            <div class="table_tool mar-b10">
                <lo-button @click="createTrans('withdrawal')" size="small" color="success">批量提现</lo-button>
            </div>
            <div class="flex-1">
                <table-container v-slot="{ containerHeight }">
                    <lo-table :columns="tableColmun" :dataSource="tableData" :height="containerHeight">
                        <template #bodyCell="{ column, record }">
                            <template v-if="column.dataIndex == 'op'">
                                <lo-button @click="createTrans('trans', record)" class="mar-r10" size="small" color="primary">批量转账</lo-button>
                                <lo-button @click="createTrans('withdrawal', record)" class="mar-r10" size="small" color="primary">提现</lo-button>
                            </template>
                        </template>
                    </lo-table>
                </table-container>
            </div>
            <div class="pager">
                <a-pagination @change="pageChange" v-model:current="tablePager.index" :pageSize="tablePager.size"
                    :total="tablePager.total" :showSizeChanger="false" />
            </div>
        </div>

        <lo-modal :title="`创建批量${ opType == 'trans' ? '转账' : '提现'}任务`" width="900px" ref="batchTransRef" @confirm="createTrans('confirm')">
            <div class="pad10">
                <template v-if="opType == 'trans'">
                    <div class="flex mar-b10">
                        <div class="flex-1">转出账户名：{{ actTransItem.FAccountName }}</div>
                        <div class="flex-1">转出账户：{{ actTransItem.FAccountNo }}</div>
                    </div>
                </template>
                <div class="flex mar-b10" v-if="actTransItem.FId">
                    <div class="flex-1">可用余额：{{ actTransItem.FAvilibleBalance }}</div>
                    <div class="flex-1">冻结余额：{{ actTransItem.FFreezeBalance }}</div>
                    <div class="flex-1">待结算余额：{{ actTransItem.FUnsettleBalance }}</div>
                    <div class="flex-1">总余额：{{ actTransItem.FTotalBalance }}</div>
                </div>
                <a-form :label-col="{ style: { width: '110px' } }">
                    <div class="flex">
                        <a-form-item class="flex-1" label="任务名称：">
                            <a-input v-model:value="transInfo.batchName" placeholder="任务名称" />
                        </a-form-item>
                        <a-form-item v-if="opType == 'trans'" class="flex-1 mar-l20" label="自动提现：">
                            <lo-select v-model:value="transInfo.autoWithDraw" noborder>
                                <a-select-option value="00">否</a-select-option>
                                <a-select-option value="01">是</a-select-option>
                            </lo-select>
                        </a-form-item>
                    </div>
                    <div class="flex">
                        <a-form-item class="flex-1" label="备注：">
                            <a-input v-model:value="transInfo.batchRemark" placeholder="备注" />
                        </a-form-item>
                    </div>
                </a-form>
                <div class="table_tool mar-b10">
                    <lo-button @click="createTrans('add')" size="small" color="success">新增账户</lo-button>
                </div>
                <lo-table :columns="transColumns" :dataSource="transInfo.items" :height="300">
                    <template #bodyCell="{ column, record, index }">
                        <template v-if="column.dataIndex == 'op'">
                            <lo-button @click="createTrans('del', index)" size="small" color="danger">删除</lo-button>
                        </template>
                        <template v-if="column.dataIndex == 'amount'">
                            <a-input v-model:value="record.amount" :placeholder="`${opType == 'trans' ? '转账' : '提现'}金额`" />
                        </template>
                        <template v-if="column.dataIndex == 'transRemark'">
                            <a-input v-model:value="record.transRemark" placeholder="银行备注" />
                        </template>
                        <template v-if="column.dataIndex == 'orderRemark'">
                            <a-input v-model:value="record.orderRemark" placeholder="备注" />
                        </template>
                    </template>
                </lo-table>

            </div>
        </lo-modal>

        <pickMerAccount ref="pickMerAccountRef"></pickMerAccount>
    </div>
</template>

<script lang="jsx" setup>
import { ref, onMounted, onActivated, nextTick, computed } from 'vue'
import { createTransBatch, getAccountBalance } from '@/api/system'
import pickMerAccount from '@/components/pages/pickMerAccount';
import { useStore } from 'vuex'
const Store = useStore()

onMounted(() => {
    getBalanceList()
})





// ************ account list ************
const tableQuery = ref({
    keyWord: ''
})
const tableColmun = ref([
    { title: '序号', type: 'index', },
    { title: '账户名', dataIndex: 'FAccountName', width: '200px' },
    { title: '账户', dataIndex: 'FAccountNo', width: '200px' },
    { title: '可用余额', dataIndex: 'FAvilibleBalance' },
    { title: '冻结余额', dataIndex: 'FFreezeBalance' },
    { title: '待结算余额', dataIndex: 'FUnsettleBalance' },
    { title: '总余额', dataIndex: 'FTotalBalance' },
    { title: '操作', dataIndex: 'op', width: '200px' },
])
const tablePager = ref({
    index: 1,
    total: 0,
    size: 30
})
const tableData = ref([])
function pageChange(e) {
    tablePager.value.index = e
    setTimeout(getBalanceList)
}
function getBalanceList() {
    getAccountBalance({
        keyWord: tableQuery.value.keyWord,
        pageIndex: tablePager.value.index,
        pageSize: tablePager.value.size
    }).then(res => {
        tableData.value = res.data.list
        tablePager.value.total = +res.data.total
    })
}




const batchTransRef = ref(null)
const transInfo = ref({ })
const opType = ref('')
const actTransItem = ref({})
const transColumns = computed(() => {
    return [
        { title: '序号', type: 'index', },
        { title: '账户名', dataIndex: 'inAccountName', width: '150px' },
        { title: '账户', dataIndex: 'inAccountNo', width: '180px' },
        { title:  (opType.value == 'trans' ? '转账' : '提现') + '金额', dataIndex: 'amount' },
        { title: '银行备注', dataIndex: 'transRemark' },
        { title: '备注', dataIndex: 'orderRemark' },
        { title: '操作', dataIndex: 'op', width: '80px' },
    ]
})



const pickMerAccountRef = ref(null)
function createTrans(type, row) {
    if (type == 'trans' || type == 'withdrawal') {
        opType.value = type
        batchTransRef.value.open()
        actTransItem.value = row || {}
        transInfo.value = {
            autoWithDraw: '00', //自动提现 00否，01是
            items: [
                // {
                //     inAccountId: '',
                //     inAccountName: '',
                //     inAccountNo: '',
                //     amount: '',
                //     transRemark: '',
                //     orderRemark: ''
                // }
            ],
            batchName: '',
            batchRemark: '',
            outAccountId: ''
        }
        if(type == 'withdrawal' && row) {
            transInfo.value.items.push({
                inAccountId: row.FAccountId,
                inAccountName: row.FAccountName,
                inAccountNo: row.FAccountNo,
                amount: '',
                transRemark: '',
                orderRemark: ''
            })
        }
    } else if (type == 'del') {
        let index = row
        transInfo.value.items.splice(index, 1)
    } else if (type == 'add') {
        pickMerAccountRef.value.open().then(rst => {
            if(transInfo.value.items.some(i => i.inAccountId == rst.id)) {
                return $global.message.warning('不能重复添加')
            }

            if( opType.value == 'trans' && actTransItem.value.FAccountId == rst.id) {
                return $global.message.warning('不能转账给自己')
            }

            transInfo.value.items.push({
                inAccountId: rst.id,
                inAccountName: rst.accountName,
                inAccountNo: rst.accountNo,
                amount: '',
                transRemark: '',
                orderRemark: ''
            })
        })
    } else if (type == 'close') {
        batchTransRef.value.close()
    } else if (type == 'confirm') {
        if (!transInfo.value.batchName) return $global.message.warning('请输入转账任务名称')
        if(transInfo.value.items.length == 0) return $global.message.warning('请添加转账账户')
        for(let i in transInfo.value.items) {
            if(!transInfo.value.items[i].amount) return $global.message.warning('请输入转账金额')
        }
        let data = {
            batchType: opType.value == 'trans' ? '00' : '01', // 00 批量转账， 01批量提现（自动提现只有转账的时候才有显示）
            batchName: transInfo.value.batchName,
            batchRemark: transInfo.value.batchRemark,
            autoWithDraw: transInfo.value.autoWithDraw,
            items: JSON.stringify(transInfo.value.items)
        }
        if(opType.value == 'trans') {
            data.batchType = '00'
            data.outAccountId = actTransItem.value.FAccountId
        } else if (opType.value == 'withdrawal') {
            data.batchType = '01'
            data.outAccountId = ''
            data.autoWithDraw = '00'
        }
        console.log(data);
        createTransBatch(data).then(res => {
            $global.message.success(res.msg)
            createTrans('close')
            pageChange(1)
        })
    }
}





</script>

<style lang="less" scoped></style>
